<template>
  <a-modal v-model:visible="visible" :mask-closable="false" title="详情" width="65vw" unmount-on-close @close="onClose">
    <a-table :columns="columns" :data="data" row-key="siteId" :pagination="false" />
    <template #footer>
      <a-button type="primary" @click="onClose">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { getChannelSyncPriceDetail } from '@/api/business/channelSyncPrice'

  const visible = ref(false)
  const data = ref([])

  const columns = [
    {
      title: '反写状态',
      dataIndex: 'statusName',
      width: 100,
    },
    {
      title: '启程-门店名称',
      dataIndex: 'siteName',
      width: 180,
    },
    {
      title: '渠道-门店名称',
      dataIndex: 'channelSiteName',
      width: 180,
    },
    {
      title: '启程车型',
      dataIndex: 'modelName',
      width: 180,
    },
    {
      title: '渠道车型',
      dataIndex: 'channelModelName',
      width: 180,
    },
    {
      title: '原因',
      dataIndex: 'errorMsg',
      width: 220,
    },
  ]
  const open = (record) => {
    visible.value = true
    getList(record)
  }

  const onClose = () => {
    visible.value = false
    data.value = []
  }

  const getList = (record) => {
    getChannelSyncPriceDetail({ id: record.id }).then((res) => {
      if (res.code == 200) {
        const itemList = res.result.itemList || []
        data.value = itemList.map((item) => {
          item.modelName = res.result.modelName
          return item
        })
        data.value = data.value.sort((a, b) => a.status - b.status)
      }
    })
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped></style>
